<template>
  <el-container v-loading="loading">

    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" label-position="left" class="demo-ruleForm"
      size="small">
      <el-form-item label="用户姓名">
        <el-input v-model="ruleForm.user_name">
        </el-input>
      </el-form-item>
      <el-form-item label="用户电话" >
        <el-input v-model="ruleForm.user_phone">
        </el-input>
      </el-form-item>
      <el-form-item label="司机数量">
        <el-input v-model="ruleForm.driver_count" type="number" min="1">
        </el-input>
      </el-form-item>
      <el-form-item label="预约时间">
        <el-date-picker
             v-model="ruleForm.about_time"
             type="datetime"
             placeholder="选择日期时间"
             :picker-options="pickerOptions"
             >
           </el-date-picker>
      </el-form-item>
      <el-form-item label="起始地址">
        <el-input v-model="ruleForm.startSpare">
          <template slot="append">
            <el-button class="filter-item" type="primary" icon="el-icon-location" @click="handleAddress(1)">
              选择地址
            </el-button>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="目的地">
        <el-input v-model="ruleForm.endSpare">
          <template slot="append">
            <el-button class="filter-item" type="primary" icon="el-icon-location" @click="handleAddress()">
              选择地址
            </el-button>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">添加</el-button>
      </el-form-item>
    </el-form>
    <el-dialog :visible.sync="dialogAddress" title="选择地址坐标" top="3vh">
      <iframe width="100%" height="700" frameborder="0" src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=EKJBZ-72L3P-FHXDL-VSLEP-JEAGJ-JTFSD&referer=myapp" />

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="selectAddress">确认</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
  export default {
    mounted() {
    },
    async created() {
      var that = this;
      window.addEventListener('message', function(event) {
        // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
        const loc = event.data
        if (loc && loc.module === 'locationPicker') {
          that.spareAddress.address = loc.poiaddress + loc.poiname
          that.spareAddress.title = loc.poiname
          that.spareAddress.location = {
            lat:loc.latlng.lat,
            lng:loc.latlng.lng
          }
        }
      }, false)
    },
    methods: {
      handleAddress(e) {
         this.start = e ? true : false;
        this.dialogAddress = true
      },
      async selectAddress() {
        if (this.start) {
          this.ruleForm.startAddress = JSON.stringify(this.spareAddress);
          this.ruleForm.startSpare = this.spareAddress.address;
        } else {
          this.ruleForm.endAddress = JSON.stringify(this.spareAddress);
          this.ruleForm.endSpare = this.spareAddress.address;
        }
        this.dialogAddress = false
      },
      submitForm(formName) {
        var _this = this;
        if (!_this.ruleForm.user_name) {
          _this.$message({
            message: '用户名不能为空',
            type: 'error'
          });
          return false;
        }
        if (!_this.ruleForm.user_phone) {
          _this.$message({
            message: '手机号不能为空',
            type: 'error'
          });
          return false;
        }
        _this.loading = true;
        _this.api.createSystemOrder(_this.ruleForm).then(res => {
          _this.loading = false;
          if (res.code == 1) {
            this.ruleForm.startAddress = {};
            this.ruleForm.sendAddress = {};
            this.ruleForm.startSpare = '';
            this.ruleForm.endSpare = '';
            this.$message({
              message:res.msg,
              type: 'success'
            })
          } else {
            this.$message({
              message:res.msg,
              type: 'error'
            })
          }

        }).catch((res) => {
          throw new Error(res)
        })

      }
    },
    data() {
      return {
        loading: false,
       pickerOptions: {
          disabledDate(time) {
            return time.getTime() <= Date.now();
          }
        },
        start: false,
        dialogAddress: false,
        spareAddress: {
        }, //备用地址
        ruleForm: {
          driver_count: 1,
          startSpare: '',
          startAddress: {
          },
          endSpare: '',
          endAddress: {
          }
        },
        rules: {
        },
      }
    },
  }
</script>

<style scoped>
  .el-container {
    display: block;
  }

  .el-form {
    width: 1000px;
    margin: 15px 0 15px 30px;
  }

  /* 图片上传 */
  .avatar-uploader {
    border: 1px dashed #d9d9d9;
    width: 178px;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
